import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/components/health/text_ex.dart';
import 'package:flutter_eve_plugin/components/ye_xiu/archives/archives_center_attr.dart';
import 'package:flutter_eve_plugin/components/ye_xiu/archives/archives_center_attr_desc.dart';
import 'package:flutter_eve_plugin/constants/font_family.dart';
import 'package:flutter_eve_plugin/constants/font_weight.dart';
import 'package:flutter_eve_plugin/model/ye_xiu/achieves/archieves_role_entity.dart';
import 'package:flutter_eve_plugin/pages/ye_xiu/archives/actions.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/archives/main.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_redux/flutter_redux.dart';

class ArchivesCenterBottomContentWidget extends StatelessWidget {
  final ArchievesRoleRoleinfo info;
  final ArchievesRoleCardinfo cardinfo;

  const ArchivesCenterBottomContentWidget({Key key, this.info, this.cardinfo})
      : super(key: key);

  List<Widget> createItem(int count) {
    return List<Widget>.generate(count, (index) {
      ArchievesRoleRoleinfoGood good = info.goods[index];
      if (good == null) {
        good = ArchievesRoleRoleinfoGood(userNum: 0, num: 0);
      } else if (good?.goodsType == 4){
        //金币材料不显示在列表里
        return Container();
      }
      return Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container(
            width: setRatio(50),
            height: setRatio(50),
            child: Stack(
              children: <Widget>[
                Container(
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage(
                              '${good?.picUrl ?? ''}')),
                      borderRadius: BorderRadius.circular(setRatio(2))),
                ),
                Positioned(
                  bottom: 0,
                  child: Container(
                    height: setRatio(13),
                    width: setRatio(50),
                    decoration: BoxDecoration(
                        color: Color(0x9F000000),
                        borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(setRatio(2)),
                            bottomRight: Radius.circular(setRatio(2)))),
                    child: Center(
                      child: Text(
                        '${good?.userNum ?? 0}/${good?.num ?? 0}',
                        style: TextStyle(
                            decoration: TextDecoration.none,
                            color: Color(0xFFFFFFFF),
                            fontFamily: FontFamily.PINGFANG,
                            fontWeight: FontWeightCustom.PF_Medium,
                            fontSize: setTextSp(9)),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
          SizedBox(height: setRatio(5)),
          Text(
            '${good?.name ?? ''}',
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
                decoration: TextDecoration.none,
                color: Color(0xFFEFF0F8),
                fontFamily: FontFamily.PINGFANG,
                fontWeight: FontWeightCustom.PF_Medium,
                fontSize: setTextSp(10)),
          )
        ],
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    int needGold = 0;
    for (ArchievesRoleRoleinfoGood archievesRoleRoleinfoGood in info.goods) {
      if (archievesRoleRoleinfoGood.goodsType == 4) {
        needGold = archievesRoleRoleinfoGood.num;
      }
    }

    return StoreConnector<AppState, ArchivesStateViewModel>(converter: (store) {
      return ArchivesStateViewModel(upRoleLevel: (cardId) {
          store.dispatch(upgradeCard(context,cardId));
      });
    }, builder: (context, vm) {
      return Container(
        margin: EdgeInsets.only(top: setRatio(90)),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            ArchivesAttrWidget(info: info),
            ArchivesAttrDescWidget(roleinfo: info),
            Container(
              padding: EdgeInsets.only(
                  left: setRatio(30), right: setRatio(26), top: setRatio(23)),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    width: setRatio(170),
                    height: setRatio(70),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: createItem(info?.goods?.length),
                    ),
                  ),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        width: setRatio(110),
                        height: setRatio(42),
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(imageUtilYeXiu(
                                    'archives/icon_archivers_upgrade@3x')))),
                        child: Padding(
                          padding: EdgeInsets.only(
                              top: setRatio(8), left: setRatio(24)),
                          child: GestureDetector(
                              onTap: () => vm.upRoleLevel(cardinfo.cardId),
                              child: TextEx(
                                '提升一级',
                                shadow: Color(0xCCCB8829),
                                style: TextStyle(
                                    fontFamily: FontFamily.PINGFANG,
                                    fontWeight: FontWeightCustom.PF_Medium,
                                    fontSize: setTextSp(15),
                                    color: Color(0xFFFFFFFF)),
                              )),
                        ),
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: <Widget>[
                          Image.asset(
                            imageUtilYeXiu('main/icon_nav_right_coin@3x'),
                            width: setRatio(20),
                            height: setRatio(20),
                          ),
                          Text(
                            '$needGold',
                            style: TextStyle(
                                decoration: TextDecoration.none,
                                fontFamily: FontFamily.PINGFANG,
                                fontWeight: FontWeightCustom.PF_Medium,
                                fontSize: setTextSp(13),
                                color: Color(0xFFFFFFFF)),
                          )
                        ],
                      )
                    ],
                  )
                ],
              ),
            )
          ],
        ),
      );
    });
  }
}
